<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是崭新的任务了！！！！</title>
    <style>
        div {
            width: 3px;
            height: 3px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>

<div id="dot0"></div>
<div id="dot1"></div>
<div id="dot2"></div>
<div id="dot3"></div>
<div id="dot4"></div>

<script>
    //todo 贪吃蛇的第一步
    var y=0;
    var x=0;
    var timer1;
    var timer2;
    var timer3;
    var timer4;



    var getDot = function (num) {
        return document.getElementById('dot' + num);
    };

    var moveHead = function (dot,transverse,longitudinal) {
        dot.style.marginLeft=transverse+'px';
        dot.style.marginTop=longitudinal+'px';
    };

    var addBody = function (num) {
        var dot = getDot(num);
        var lastDot = getDot(num-1);
        dot.style.marginLeft = lastDot.style.marginLeft;
        dot.style.marginTop = lastDot.style.marginTop;
    };


    var judge = function (transverse,longitudinal) {
        if(transverse>300){
            x=0;
        }
        if(longitudinal>300){
            y=0;
        }
        if(transverse<0){
            x=300;
        }
        if(longitudinal<0){
            y=300;
        }
    };

    document.addEventListener('keydown',function (event) {
        if(event.key==='ArrowDown'){
            clearInterval(timer3);
            clearInterval(timer4);
            clearInterval(timer2);
            clearInterval(timer1);
            timer1 = setInterval(function () {
                judge(x,y);
                addBody(4);
                addBody(3);
                addBody(2);
                addBody(1);
                moveHead(getDot(0),x,y);
                y+=3;
            },40);
        }else if(event.key==='ArrowUp'){
            clearInterval(timer3);
            clearInterval(timer4);
            clearInterval(timer2);
            clearInterval(timer1);
            timer2 = setInterval(function () {
                judge(x,y);
                addBody(4);
                addBody(3);
                addBody(2);
                addBody(1);
                moveHead(getDot(0),x,y);
                y-=3;
            },40)
        }else if(event.key==='ArrowLeft'){
            clearInterval(timer3);
            clearInterval(timer4);
            clearInterval(timer2);
            clearInterval(timer1);
            timer3 = setInterval(function () {
                judge(x,y);
                addBody(4);
                addBody(3);
                addBody(2);
                addBody(1);
                moveHead(getDot(0),x,y);
                x-=3;
            },40)
        }else if(event.key==='ArrowRight'){
            clearInterval(timer3);
            clearInterval(timer4);
            clearInterval(timer2);
            clearInterval(timer1);
            timer4 = setInterval(function () {
                judge(x,y);
                addBody(4);
                addBody(3);
                addBody(2);
                addBody(1);
                moveHead(getDot(0),x,y);
                x+=3;
            },40)
        }
    });

</script>
</body>
</html>